<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Radar with Rotated Squares and Images</title>
        <script src="https://cdn.jsdelivr.net/npm/echarts@5.6/dist/echarts.min.js"></script>
        <style>
            #main {
                width: 200px;
                height: 200px;
                margin: 200px;
            }
        </style>
        <style>
            /* 在 CSS 文件中定义自定义字体 */
            @font-face {
                font-family: "MyCustomFont"; /* 自定义字体名称 */
                src: url("public/只含数字.ttf");
                font-weight: normal;
                font-style: normal;
            }
        </style>
    </head>
    <body>
        <div id="main"></div>

        <script>
            const chartDom = document.getElementById("main");
            const myChart = echarts.init(chartDom);

            let domWidth, domHeight;

            try {
                const { width, height } = chartDom.getClientRects()[0];
                domWidth = width;
                domHeight = height;
            } catch (error) {
                console.log("获取 DOM 尺寸 失败", error);
            }

            const radius = 75;
            // 位置 是 相对于canvas的中心  dom的定位无关
            const centerX = domWidth ? domWidth / 2 : 100;
            const centerY = domHeight ? domHeight / 2 : 100;
            const squareSize = 16;

            // const imageUrl = "/public/arrow.png"; // 替换成你自己的 16x16 图片链接
            const imageUrl = "/public/上_grass.png"; // 替换成你自己的 16x16 图片链接

            // 计算六个顶点位置和角度
            const graphics = [];
            for (let i = 0; i < 6; i++) {
                const angle = (Math.PI / 3) * i - Math.PI / 2;
                const x = centerX + radius * Math.cos(angle);
                const y = centerY + radius * Math.sin(angle);

                // 外层旋转方块
                graphics.push({
                    type: "group",
                    position: [x, y],
                    rotation: (Math.PI / -3) * i,
                    children: [
                        {
                            type: "rect",
                            shape: {
                                x: -squareSize / 2,
                                // 窄一些 放置和label重合
                                y: -squareSize / 2 / 2,
                                width: squareSize,
                                height: squareSize / 2,
                            },
                            style: {
                                // 和背景重色 以达到透明间隙
                                // 或者 用图片背景 重色
                                fill: "#000",
                            },
                            // 用z来覆盖下层
                            z: 2,
                        },
                        {
                            type: "image",
                            style: {
                                image: imageUrl,
                                x: -squareSize / 2,
                                y: -squareSize / 2,
                                width: squareSize,
                                height: squareSize,
                            },
                            z: 2,
                        },
                    ],
                });
            }

            const option = {
                backgroundColor: "#000",
                radar: {
                    center: ["50%", "50%"],
                    radius: radius,
                    indicator: [
                        // 高度大一些 放置数字和边角重合
                        { name: "A", max: 10 + 3 },
                        { name: "B", max: 10 + 3 },
                        { name: "C", max: 10 + 3 },
                        { name: "D", max: 10 + 3 },
                        { name: "E", max: 10 + 3 },
                        { name: "F", max: 10 + 3 },
                    ],
                    shape: "polygon",
                    splitNumber: 2,
                    axisName: {
                        color: "#ccc",
                        fontWeight: "bold",
                    },
                    splitLine: {
                        lineStyle: {
                            color: "#1E8F38",
                            width: 1,
                        },
                    },
                    splitArea: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                },
                series: [
                    {
                        type: "radar",
                        data: [
                            {
                                value: [10, 6, 4, 10, 7, 8],
                                areaStyle: {
                                    color: "#00ff0077",
                                },
                                lineStyle: {
                                    color: "#00D753",
                                },
                                itemStyle: {
                                    color: "#00D753",
                                },
                                label: {
                                    show: true,
                                    color: "#00D753",
                                    fontSize: 12,
                                    // 尽量减少文字和镂空部分重叠
                                    position: "right",
                                    distance: 1,
                                    fontFamily: "MyCustomFont",
                                    formatter: function (params) {
                                        return params.value;
                                    },
                                    z: 3,
                                },
                            },
                        ],
                        z: 1,
                    },
                ],
                graphic: [
                    {
                        type: "circle",
                        left: "center",
                        top: "center",
                        shape: {
                            r: 4,
                        },
                        style: {
                            fill: "#00D753",
                        },
                    },
                    ...graphics,
                ],
            };

            myChart.setOption(option);
        </script>
    </body>
</html>
